/**  rel="stylesheet/scss" lang="scss"*/
$xr-color-primary: #2362fb; // 主色调蓝色
/// color|1|Background Color|4
$xr-color-white: #ffffff !default;
/// color|1|Background Color|4
$xr-color-black: #000000 !default;

/// color|1|Font Color|2
$xr-color-text-primary: #333333 !default;
/// color|1|Font Color|2
$xr-color-text-regular: #666666 !default;
/// color|1|Font Color|2
$xr-color-text-secondary: #999999 !default;
/// color|1|Font Color|2
$xr-color-text-placeholder: #c0c4cc !default;

// Box-shadow
/// boxShadow|1|Shadow|1
$xr-box-shadow-base:
  0 2px 4px rgba(0, 0, 0, 0.12),
  0 0 6px rgba(0, 0, 0, 0.04) !default;
// boxShadow|1|Shadow|1
$xr-box-shadow-dark:
  0 2px 4px rgba(0, 0, 0, 0.12),
  0 0 6px rgba(0, 0, 0, 0.12) !default;
/// boxShadow|1|Shadow|1
$xr-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;

/** backgroud */
$xr--background-color-base: #f6f8fa;

/** border */
$xr-border-color-base: #e6e6e6;
$xr-border-radius-base: 4px;
/// borderRadius|1|Radius|0
$xr-border-radius-small: 2px !default;
$xr-border-line-color: #e6e6e6;
$xr-focus-border: $xr-color-primary;

/** table */
$xr--table-border-color: $xr-border-color-base;

$xr-font-size-base: 14px;
$xr-font-size-small: 12px;
$xr-font-size-large: 18px;

$xr-backgroud: #f5f6f9;
/* Popover
-------------------------- */

/* Dialog
-------------------------- */
$xr-dialog-title-font-size: 16px;

/* xrContent  */
$xr-content-left-menu-width: 280px;
$xr-content-tree-height: 50px;
$xr-content-tree-node-height: 40px;

/* xrUpload  */
$xr-tiffany-blue: #1861f2;
$xr-tiffany-blue-sub: #1247b3;

.xr-btn--orange {
  background-color: #ff6a00 !important;
  border-color: #ff6a00 !important;
}
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  xrColorPrimary: $xr-color-primary;
}

$defaultBtnColor: #5e6278;
$defaultBtnBgColor: #f5f8fa;
$greenBtnColor: #fff;
$greenBtnBgColor: #00c2a7;
$greenBtnBgColorNoActive: rgba(4, 200, 200, 0.4);
$greenBtnHoverBgColor: #1247b3;
$noIconBtnColor: #7e8299;
$greenBgColor: #dcfdfd;
$deleteColor: #f1416c;
$deleteDeepColor: #d9214e;
$deleteColorNoActive: rgba(241, 65, 108, 0.4);
$deleteBgColor: #fff5f8;
$blueColor: #1861f2;
$blueBtnBgColor: #7da7f9;
$orangeColor: #ffc700;
$purpleColor: #7239ea;
$blueBgColor: #f1faff;
$orangeBgColor: #fff8dd;
$purpleBgColor: #f8f5ff;
$redColor: #f1416c;
$redBgColor: #fff5f8;
$redDisableColor: #f1416c66;
$redBgDisableColor: #fff5f866;

$inputBackgroundActive: #eef3f7;
$inputRadius: 8px;

$titleColor: #3f4254;
$descColor: #b5b5c3;

$borderColor: #eff2f5;
$borderDashColor: #e4e6ef;

// 卡片阴影
@mixin shadowBox {
  box-shadow: 0px 10px 35px 0px rgba(56, 71, 109, 0.06);
}

// 漂浮框（下拉菜单）阴影
@mixin shadowFloat {
  box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
}

// 菜单图标样式
@mixin menu {
  img {
    width: 16px;
    height: 16px;
  }
  .no {
    display: block;
  }
  .yes {
    display: none;
  }
  &:hover,
  &.active {
    .no {
      display: none;
    }
    .yes {
      display: block;
    }
  }
}

@mixin title($fontsize) {
  font-size: $fontsize + px;
  font-weight: 500;
  color: #181c32;
}

@mixin btnIcon($marginRight) {
  img {
    width: 16px;
    height: 16px;
    margin-right: $marginRight + px;
  }
}

@mixin label {
  font-size: 14px;
  color: $titleColor;
  font-weight: 500;
}

@mixin statusLabel {
  width: 58px;
  height: 24px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  line-height: 24px;
  text-align: center;
}

@mixin greenStatus {
  background-color: $greenBgColor;
  color: $greenBtnBgColor;
}

@mixin blueStatus {
  background-color: $blueBgColor;
  color: $blueColor;
}

@mixin redStatus {
  background-color: $deleteBgColor;
  color: $deleteColor;
}

@mixin grayStatus {
  background-color: $defaultBtnBgColor;
  color: $noIconBtnColor;
}

@mixin purpleStatus {
  background-color: $purpleBgColor;
  color: $purpleColor;
}

@mixin newCheckBox {
  align-items: flex-start;
  .el-checkbox__inner {
    width: 22px;
    height: 22px;
    background: #eef3f7;
    border-radius: 6px;
    border: none;
    &::after {
      width: 5px;
      left: 7px;
      top: 5px;
      border-width: 2px;
      border-color: #fff;
    }
  }
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background: $greenBtnBgColor;
  }
}

@mixin btn-with-icon {
  .btn {
    img {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }
  }
}

.el-checkbox__input.is-checked .el-checkbox__inner {
  background: #1861f2 !important;
  border-color: #1861f2 !important;
}
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background: #1861f280 !important;
  border-color: #1861f280 !important;
}

.status0 {
  @include statusLabel;
  @include purpleStatus;
}
.status1 {
  @include statusLabel;
  @include grayStatus;
}
.status2 {
  @include statusLabel;
  @include blueStatus;
}
.status3 {
  @include statusLabel;
  @include greenStatus;
}
.status4 {
  @include statusLabel;
  @include redStatus;
}

@mixin smallStatus {
  width: 8px;
  height: 8px;
  border-radius: 3px;
}

.small-status0 {
  @include smallStatus;
  background-color: $purpleColor;
}

.small-status1 {
  // @include smallStatus;
  // background-color: $defaultBtnBgColor;
  width: 52px;
  height: 20px;
  border-radius: 6px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  @include grayStatus;
  &::before {
    content: '未开始';
  }
}

.small-status2 {
  @include smallStatus;
  background-color: $blueColor;
}

.small-status3 {
  // @include smallStatus;
  width: 0;
  height: 0;
  // background-color: $greenBtnBgColor;
  // opacity: 0.4;
}

.small-status4 {
  @include smallStatus;
  background-color: $redColor;
}

.disabled {
  cursor: not-allowed !important;
}
